<template>
    <div>
        <van-index-bar>
            <div v-for="(item, index) of allList" :key="index">
                <van-index-anchor :index="item[0]" />
                <van-cell v-for="cityItem of item[1]" :key="cityItem.id" :title="cityItem.name"
                    @click="$emit('handleCity', cityItem.name)"
                    />
            </div>
        </van-index-bar>
    </div>
</template>

<script setup>
import { getCityHttp } from "@/request/index.js";
import { ref, onMounted, computed } from "vue";
// import { useRouter } from "vue-router";
// const $router = useRouter();
const allList = ref([])
onMounted(async () => {
    let res = await getCityHttp();
    // console.log(res.data.cities,'cityList');
    const result = res.data.cities
    // for(const key in result){
    //     indexList.value.push(key)
    //     // console.log(indexList,'key')
    // }
    // 需要注意的是，Object.entries() 只会返回对象自身的可枚举属性，不会返回继承自原型链的属性。
    // 这与 for...in 循环不同，因为 for...in 循环会遍历原型链上的属性，除非使用 hasOwnProperty() 方法进行过滤。
    allList.value = Object.entries(result)
    // console.log(allList, 'indexList')
})

const $emit = defineEmits(["handleCity"]);
</script>

<style scoped>
:deep(.van-index-bar) {
    cursor: pointer;
}

:deep(.van-index-bar__sidebar) {
    cursor: pointer;
    user-select: none;
}
</style>